<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#545c64"
    unique-opened="true"
    active-text-color="#ffd04b"
    text-color="#fff"
    router
  >
    <h4>
      <img class="el-dropdown-link" src="../assets/R-C.png" alt="logo" />

      {{ isCollapse ? "" : "九尾医疗服务后台" }}
    </h4>
    <el-menu-item
      :index="item.name"
      v-for="item in noChildren"
      :key="item.name"
      :to="item.path"
    >
      <el-icon>
        <component :is="item.icon"></component>
      </el-icon>
      <template #title>{{ item.lable }}</template>
    </el-menu-item>
    <el-sub-menu
      :index="item.name"
      v-for="item in hasChildren"
      :key="item.name"
      :to="item.path"
    >
      <template #title>
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.lable }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          class="box"
          :index="uitem.name"
          v-for="uitem in item.children"
          :key="uitem.name"
          :to="uitem.path"
          >{{ uitem.lable }}</el-menu-item
        >
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { computed } from "@vue/reactivity";
import {
  HomeFilled,
  DocumentChecked,
  Coin,
  FirstAidKit,
  Tools,
} from "@element-plus/icons-vue";
import { useStore } from "vuex";
const store = useStore();
const isCollapse = computed(() => {
  return store.state.isCollapse;
});
const menuList = [
  {
    path: "/home1",
    lable: "首页",
    name: "home1",
    icon: HomeFilled,
  },
  //预约管理
  {
    path: "/appointment",
    lable: "预约管理",
    name: "appointment",
    icon: DocumentChecked,
    children: [
      {
        path: "/register",
        lable: "预约挂号",
        name: "register",
        icon: "s-goods",
      },
      {
        path: "/test",
        lable: "预约核酸检测",
        name: "test",
        icon: "s-goods",
      },
      {
        path: "/medical",
        lable: "预约体检",
        name: "medical",
        icon: "s-goods",
      },
      {
        path: "/scheduling",
        lable: "医生排班",
        name: "scheduling",
        icon: "s-goods",
      },
    ],
  },
  //费用管理
  {
    path: "/cost",
    lable: "费用管理",
    name: "cost",
    icon: Coin,
    children: [
      {
        path: "/outpatient",
        lable: "门诊消费记录",
        name: "outpatient",
        icon: "s-goods",
      },
      {
        path: "/hospital",
        lable: "住院消费记录",
        name: "hospital",
        icon: "s-goods",
      },
      {
        path: "/refund",
        lable: "退款记录",
        name: "refund",
        icon: "s-goods",
      },
    ],
  },
  //医院信息
  {
    path: "/information",
    lable: "医院信息",
    name: "information",
    icon: FirstAidKit,
    children: [
      {
        path: "/doctor",
        lable: "医生管理",
        name: "doctor",
        icon: "camera-solid",
      },
      {
        path: "/department",
        lable: "科室管理",
        name: "department",
        icon: "s-order",
      },
      {
        path: "/examination",
        lable: "体检套餐",
        name: "examination",
        icon: "s-help",
      },
      {
        path: "/health",
        lable: "健康百科",
        name: "health",
        icon: "picture",
      },
      {
        path: "/navigation",
        lable: "医院导航",
        name: "navigation",
        icon: "s-goods",
      },
      {
        path: "/Introduction",
        lable: "医院简介",
        name: "Introduction",
        icon: "s-goods",
      },
      {
        path: "/notice",
        lable: "预约须知",
        name: "notice",
        icon: "s-goods",
      },
    ],
  },
  //系统设置
  {
    path: "/systemSettings",
    lable: "系统设置",
    name: "systemSettings",
    icon: Tools,
    children: [
      {
        path: "/administrators",
        lable: "管理员管理",
        name: "administrators",
        icon: "s-goods",
      },
      {
        path: "roleManagement",
        lable: "角色管理",
        name: "roleManagement",
        icon: "s-goods",
      },
      {
        path: "/titleManagement",
        lable: "职称管理",
        name: "titleManagement",
        icon: "s-goods",
      },
      {
        path: "/messageAnnouncement",
        lable: "消息公告",
        name: "messageAnnouncement",
        icon: "s-goods",
      },
      {
        path: "/changePassword",
        lable: "修改密码",
        name: "changePassword",
        icon: "s-goods",
      },
    ],
  },
];

//获取一级目录
const hasChildren = computed(() => {
  return menuList.filter((item) => item.children);
});
//获取二级目录
const noChildren = computed(() => {
  return menuList.filter((item) => !item.children);
});
</script>

<style lang="less" scoped>
.el-menu {
  height: 100vh;
  width: 100%;
  border: 0px;

  h4 {
    color: rgb(231, 215, 5);
    height: 60px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
  }
}
.box {
  background-color: #51565c;
}

.el-dropdown-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
